<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-自定义组件</title>
    <script src="./lib/vue.v2.5.17.js"></script>
</head>
<script type="application/javascript">
    // 1. 定义vue组件 my-blog
    // 参数1： 组件名称，这个会在页面中作为标签使用到
    // 参数2： 组件参数对象
    //   data: 组件级别绑定的对象
    //   props: 父组件向本组件传递的参数key数组
    Vue.component('my-blog', {
        props: {
            blog: {type: Object, required: true,
                validator: (obj) => { // 自定义校验参数方法
                    if (obj.date instanceof Date) {
                        return true
                    }
                    console.error('blog.title need a Date type')
                    return false
                }}
        }, // 此参数名为 组件中可被绑定对象的属性名
        template: `
            <div>
                <label>{{ blog.title }}</label>
                <div>
                    作者：<label>{{ blog.author }}</label>
                    日期：<label>{{ blog.date }}</label>
                </div>
                <textarea>{{ blog.content }}</textarea>
            </div>
        `
    })
</script>
<body>
<!--2. 在页面使用自定义vue组件-->
<div id="my-app">
    <my-blog :blog="myBlog"></my-blog>
</div>
</body>
<script type="application/javascript">
    // 3. 实例化vue实例
    let vm = new Vue({
        el: '#my-app',
        data: {
            myBlog: {
                title: 'vue自定义组件',
                author: '林勃',
                date: new Date(),
                content: '手打vue代码'
            }
        }
    })
</script>
</html>